<template>
  <div id="dialogAddEditGuid">
    <el-dialog
      class="about-set"
      :title="isAdd ? `添加引导页` : '编辑引导页'"
      :visible.sync="dialogData.isShow"
      width="620px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="名称" prop="name">
            <el-input
              placeholder="20个字符"
              maxlength="20"
              show-word-limit
              v-model.trim="ruleForm.name"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input
              v-model.trim="ruleForm.description"
              placeholder=""
              type="textarea"
              show-word-limit
              maxlength="50"
            ></el-input>
          </el-form-item>
          <el-form-item class="min-margin" label="主图" prop="imgInfo">
            <uploadImg
              :img-info="ruleForm.imgInfo"
              :maxLength="5"
              :maxSize="5"
              @setImgInfo="setImgInfo"
            ></uploadImg>
          </el-form-item>
          <el-form-item label="选择版本" prop="version">
            <template>
              <el-select v-model="ruleForm.version" placeholder="不限">
                <el-option
                  v-for="item in versionsList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('ruleForm')"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addGuidance,
  getEditGuidance,
  editGuidance
} from '@/api/spaceConfiguration/appGuidance' // 接口
import uploadImg from '@common/uploadImg' // 上传图片公共组件
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { validateSpecial } from '@utils/validate'
export default {
  name: 'DialogAddEdit',
  msg: '配置标签分类-新增/编辑弹窗',
  props: ['dialogData'],
  components: {
    uploadImg
  },
  data() {
    var valiAppNmae = (rule, value, callback) => {
      if (!validateSpecial(value)) {
        callback(new Error('不能使用特殊字符'))
      } else {
        callback()
      }
    }
    return {
      isAdd: true, // 新增-true,编辑-false
      loading: false,
      ruleForm: {
        name: '', // 名称
        description: '', // 描述
        imgInfo: '', // 图片
        version: '' // 版本
      },
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { validator: valiAppNmae, trigger: 'blur' }
        ],
        imgInfo: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
        version: [{ required: true, message: '版本不能为空', trigger: 'blur' }]
      },
      versionsList: []
    }
  },

  mounted() {
    this.getStatusList()
    this.isAdd = this.dialogData.id ? false : true
    if (!this.isAdd) {
      // 编辑
      this.id = this.dialogData.id
      this.getFormData()
    }
  },
  methods: {
    async getStatusList() {
      // 选择版本
      this.versionsList = await sysNormalDisable('app_version')
      this.setDefaultValue()
    },
    /*设置默认数据*/
    setDefaultValue() {
      this.ruleForm.version = this.versionsList[3].dictValue
    },
    /* 图片上传成功后，获取返回结果 */
    setImgInfo(ary) {
      this.imgInfo = ary //返回为数组
      this.ruleForm.imgInfo = ary.length > 0 ? JSON.stringify(ary) : ''
    },
    /* 编辑时获取表单详情 */
    getFormData() {
      getEditGuidance(this.id, (response) => {
        this.ruleForm = { ...response }
      })
    },
    /* 确认提交 */
    confirmLabel(formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.subForm()
        } else {
          return false
        }
      })
    },
    /* 提交表单 */
    async subForm() {
      this.loading = true
      let obj = { ...this.ruleForm }
      if (this.isAdd || this.dialogData.type === 'copy') {
        // 新增
        await addGuidance(
          obj,
          (response) => {
            this.loading = false
            this.$emit('refresh')
            this.cancelLabel()
          },
          (response) => {
            this.loading = false
            this.$message.warning({
              message: response.message,
              type: 'warning'
            })
          }
        )
      } else {
        // 编辑
        editGuidance(
          this.id,
          obj,
          (response) => {
            this.loading = false
            this.$emit('refresh')
            this.cancelLabel()
          },
          (response) => {
            this.loading = false
            this.$message.warning({
              message: response.message,
              type: 'warning'
            })
          }
        )
      }
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.id = null
      this.dialogData.labelCategory = ''
      this.dialogData.isShow = false
    }
  }
}
</script>

<style lang="less">
#dialogAddEditGuid {
  .el-textarea {
    .el-textarea__inner {
      height: 70px;
      padding-bottom: 18px;
    }
    .el-input__count {
      display: inline-block;
      color: #909399;
      background: #fff;
      position: absolute;
      width: calc(100% - 10px);
      font-size: 12px;
      bottom: 1px;
      right: 1px;
      left: 1px;
      text-align: right;
      line-height: 20px;
    }
  }
  .el-select {
    width: 150px !important;
  }
}
</style>
